<template>
  <div class="header">
    <img class="scan" src="../../../assets/img/index/scan3.png">
    <div class="search">{{ searchTxt }}</div>
    <div class="city">
      哈尔滨
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    searchTxt: {
      type: String,
      default: '读书征文活动火热进行中'
    }
  },
  data() {
    return {
      longitude: 0, // 经度
      latitude: 0, // 维度
      city: '' // 城市
    }
  },
  mounted() {
    //  this.getLocation();
  },
  methods: {
    // getLocation(){
    //     let geolocation = new qq.maps.Geolocation("3PXBZ-DOQK6-FQISF-M2BXT-MOETT-L6FIM", "myapp");
    //     geolocation.getLocation(this.showPosition, this.showError);
    // },
    // showPosition(position){
    //     console.log(position);
    //     this.latitude = position.lat;
    //     this.longitude = position.lng;
    //     this.city = position.city;
    // },
    // showError(){
    //    console.log('定位失败');
    //    // 继续定位
    //    this.getLocation();
    // }
  }
}
</script>

<style lang="scss" scoped>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    z-index: 2;
    padding: 0 10px;
    background: #fff;
    .scan {
      height: 22px;
    }
    .search {
      height: 30px;
      line-height: 30px;
      text-align: left;
      flex: 1;
      background-color: #F5F5F5;
      margin: 0 10px;
      border-radius: 15px;
      background-image: url('../../../assets/img/index/search_icon@2x.png');
      background-position: 10px center;
      background-repeat: no-repeat;
      background-size: 16px;
      color: #CCC;
      font-size: 12px;
      padding-left: 30px;
      box-sizing: content-box;
    }
    .city {
      color: #333;
      font-size: 14px;
    }
  }
</style>
